/**
 * @module  二维码
 * @author xiongsha
 * @date 2020-12-21 21:31:01
 */
import React, { useState, useImperativeHandle, forwardRef } from 'react';
import HeaderComponent from '@src/pages/components/Header';
import { Link } from 'react-router-dom';
import request from '@src/utils/request';
// import { RouteComponentProps, withRouter } from 'react-router';
import './index.less';

interface ILevels {
  begin_at?: string;
  content?: string;
  end_at?: string;
  name?: string;
}

interface IMine {
  account?: string;
  avatar?: string;
  bound_phone?: boolean;
  bound_wechat?: boolean;
  nickname?: string;
  levels?: ILevels[];
}

interface IMineCon {
  mine: IMine;
  [prop: string]: any;
}
const EwmContent = (props:IMineCon, ref) => {
  const [ewmLink, setEwmLink] = useState<string>('');
  const { mine } = props;
  const getEwm = () => {
    request('get', '/api/v1/barcode').then((res) => {
      if (res && res.code === 200) {
        setEwmLink(res.data);
      }
    });
  };
  useImperativeHandle(ref, () => ({
    getVal: () => {
      getEwm();
    },
  }));

  return (
    <div className="ewm">
      <HeaderComponent text="会员码" />
      <div className="ewm-box">
        <img onClick={() => getEwm()} src={ewmLink} alt="" />
        <p className="ewm-tips">连续使用请点击二维码刷新</p>
        <div className="mine-account">
          现金账户
          <span>¥{mine.account}</span>
        </div>
      </div>
      <Link className="goPay" to="/recharge">
        去充值 &gt;
      </Link>
    </div>
  );
};

export default forwardRef(EwmContent);
